<template>
  <view class="oto-waterfall-loading" :style="[getStyle]">
    {{ text }}
    <slot></slot>
  </view>
</template>

<script>
  export default {
    props: {
      text: {
        type: String,
        default: '加载中...'
      },
      customStyle: {
        type: Object,
        default() {
          return {};
        }
      },
      // 随机生成高度
      useRandomHeight: {
        type: Boolean,
        default: false // false，如style未设置，则默认使用默认高度，反之则否
      },
      // 随机生成高度区间,单位rpx
      heightRandomLimit: {
        type: Array,
        default() {
          return [250, 600];
        }
      }
    },
    computed: {
      getStyle() {
        const _style = {
          width: '346rpx',
          height: '480rpx'
        };
        Object.assign(_style, this.customStyle);
        if (this.useRandomHeight) {
          _style.height = `${this.random(...this.heightRandomLimit)}rpx`;
        }
        return _style;
      }
    },
    methods: {
      random(m, n) {
        //随机在m、n之间的整数
        return Math.round(Math.random() * (n - m)) + m;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .oto-waterfall-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #c0c0c0;
    border-radius: 12rpx;
    background-color: #ebebeb;
  }
</style>
